Para utilizar los Reactive forms primero tenemos que importar un modulo en el archivo app.module.ts, el modulo que tenemos que importar es el ReactiveFormsModule, utilizando el siguiente import:
import { ReactiveFormsModule } from '@angular/forms';
El codigo del archivo quedaría tal que así:
A continuacion en el archivo mesa.component.ts tenemos que incluir la variable que queremos usar para almacenar la informacion que pasaremos desde nuestro formulario y asignarle un objeto FormControl, tendremos que añadir el siguiente import:
import { FormControl } from '@angular/forms';
y la variable la definimos de la siguiente manera:
name = new FormControl('');
El código final del archivo mesa.component.ts nos quedaría tal que así:
Y para terminar, dentro del template de nuestro componente, mesa en nuestro caso, creamos un input de texto y utilizamos la directiva [formControl] para asociar ese elemento con la variable que declaramos dentro de nuestro componente, despues simplemente mostramos el valor de la variable dentro del segundo parrafo que creamos, el codigo del archivo mesa.component.html quedaría tal que así:
<p>Mesa Componente</p>
<input type="text" [formControl]="name"/>
<p>{{name.value}}</p>Y al escribir dentro de nuestro input box podemos ver que el texto del parrafo que hay colocado debajo se actualiza en tiempo real:
NOTA: En vez de utilizar el [formControl] tambien se puede utilizar el [formGroup] con el formControlName y asi utilizar la validación de formularios al mismo tiempo, mas info aqui: Validacion de formularios